<!-- 学社 - 动态 - 动态详情 -->
<template>
  <view>
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
      <z-navbar title="动态详情" :border-bottom="true" />
      <view class="px-4">
        <!-- 顶部信息 -->
        <view class="flex items-center h-80 mt-4">
          <u-image shape="circle" width="80" height="80" :src="state.detailData?.user?.avatar"
            @click="toHomePage(state.detailData?.user?.id)"></u-image>
          <view class="flex flex-col justify-between ml-3 h-76">
            <view class="flex items-center">
              <view class="c-#333 text-32 flex-shrink-0" @click="toHomePage(state.detailData?.user?.id)">{{
                state.detailData?.user?.nickname }}</view>
              <view v-if="state.detailData?.member_position > 0" class="tag-identity mx-2 flex-shrink-0">{{ identity }}
              </view>
              <image v-if="state.detailData?.user?.vip_level > 0" mode="aspectFit"
                :class="['flex-shrink-0', state.detailData?.user?.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
                :src="`/static/images/user/ic_vip_tag_${vipIcon}.png`" />
            </view>
            <view class="c-#999 text-24">{{ state.detailData?.createtime }}</view>
          </view>
          <!-- 只有发布者可以删除 -->
          <view v-if="state.detailData?.is_self" class="flex-1 flex justify-end">
            <u-image width="48" height="48" src="/static/images/home/ic_trend_delete.png"
              @click="onDelete(state.detailData?.id)"></u-image>
          </view>
        </view>
        <!-- 文字内容 -->
        <view class="my-3">
          <view class="h-auto">
            <view class="c-#666 text-sm">{{ state.detailData?.content }}</view>
          </view>
        </view>
        <!-- 图片内容 -->
        <view v-if="state.mediaType == 1">
          <view class="grid grid-cols-3 mt-1">
            <u-image class="mb-1" v-for="(item, index) in state.detailData?.slideshow" :key="index" width="218"
              height="144" border-radius="10" :src="item"
              @click="previewImage(state.detailData?.slideshow, index)"></u-image>
          </view>
        </view>
        <!-- 视频内容 -->
        <view v-else>
          <video class="w-full h-386"
            src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
            controls></video>
        </view>
        <!-- 评论/点赞 -->
        <view class="flex justify-end items-center c-#999 text-24 mt-3">
          <view class="flex items-center">
            <u-image width="38" height="34" src="/static/images/home/ic_trend_comment.png"></u-image>
            <view class="ml-1">{{ state.detailData?.comment_num }}</view>
          </view>
          <view class="flex items-center ml-3">
            <image class="w-42 h-36" @click="onLikeSwitch(state.detailData.id, state.detailData.is_like)"
              :src="`/static/images/home/ic_trend_${state.detailData?.is_like ? 'like' : 'nolike'}.jpg`"></image>
            <view class="ml-1">{{ state.detailData?.like_num }}</view>
          </view>
        </view>
        <!-- 点赞人列表 -->
        <view class="mt-3 c-#666 text-sm" v-if="state.detailData?.like_info.length > 0">
          <view class="mr-2 inline-block h-38 align-middle">
            <image class="inline-block w-30 h-26" src="/static/images/home/ic_comment_like.png"></image>
          </view>
          <text v-for="(item, index) in state.detailData?.like_info" :key="index">
            {{ item.user.nickname }}<template v-if="index != state.detailData?.like_info.length - 1">、</template></text>
          <text>等{{ state.detailData?.like_info.length }}人觉得好不错</text>
        </view>
        <!-- 评论 -->
        <view class="mt-4 pb-10">
          <view class="c-#333 text-40 font-bold">评论（{{ state.commentNum }}）</view>
          <!-- 父评论 -->
          <view v-for="(item, index) in state.list" :key="index" class="comment-item">
            <view class="comment-item-hd">
              <u-image class="flex-shrink-0" shape="circle" width="40" height="40" :src="item.avatar"
                @click="toHomePage(item.user_id)"></u-image>
              <view class="c-#333 text-32 mx-2 text-single" @click="toHomePage(item.user_id)">{{ item.nickname }}</view>
              <view v-if="item.member_position > 0" class="flex-shrink-0 tag-identity mx-2">{{
                formatIdentity(item.member_position) }}
              </view>
              <image v-if="item.vip_level > 0" mode="aspectFit"
                :class="['flex-shrink-0', item.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
                :src="`/static/images/user/ic_vip_tag_${formatVipIcon(item.vip_level)}.png`" />
              <view class="flex-shrink-0 c-#999 text-20  ml-2">{{ item.createtime }}</view>
              <view class="flex-1 flex justify-end items-center">
                <view class="mr-1 text-24 c-#999">{{ item.like_num }}</view>
                <image class="w-26 h-22 mt-1" @click="onCommentLike(item.id, item.is_like)"
                  :src="`/static/images/home/ic_trend_${item.is_like ? 'like' : 'nolike'}.jpg`"></image>
              </view>
            </view>
            <view class="c-#666 text-sm mt-1" @click="onReply(item.id)">{{ item.comment_content }}</view>
            <!-- 子评论 -->
            <view v-for="(commentItem, commentIndex) in item.reply" :key="commentIndex">
              <view class="comment-item-hd mt-2">
                <u-image class="flex-shrink-0" shape="circle" width="40" height="40" :src="commentItem.user?.avatar"
                  @click="toHomePage(commentItem.user?.id)"></u-image>
                <view class="c-#F4AF22 text-32 ml-2 text-single" @click="toHomePage(commentItem.user?.id)">{{
                  commentItem.user?.nickname }}</view>
                <u-icon class="mx-1" name="play-right-fill" color="#D3D3D3" size="16"></u-icon>
                <view class="c-#333 text-32 mr-2 flex-shrink-0">{{ commentItem.reply?.nickname }}</view>
                <view class="c-#999 text-20 flex-shrink-0 text-single">{{ commentItem.createtime }}</view>
                <view class="flex-1 flex justify-end items-center">
                  <view class="mr-1 text-24 c-#999">{{ commentItem.like_num }}</view>
                  <image class="w-24 h-22 mt-1" @click="onCommentLike(commentItem.id, commentItem.is_like)"
                    :src="`/static/images/home/ic_trend_${commentItem.is_like ? 'like' : 'nolike'}.jpg`"></image>
                </view>
              </view>
              <view class="c-#666 text-sm mt-1 ml-7" @click="onReply(commentItem.id)">{{ commentItem.comment_content }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view :style="{ bottom: state.bottom + 'px' }"
        class="w-full flex items-center bg-#fff border-bottom px-4 h-150  fixed">
        <view class="input-style">
          <image class="w-28 h-23" src="/static/images/common/ic_discuss.jpg" />
          <input :adjust-position="false" @focus="onFocus" @blur="onBlur" v-model="state.comment" class="flex-1 ml-2"
            :placeholder="state.placeholder" clearable />
        </view>
        <view class="btn-send" :class="[{ 'opacity-50': !state.comment, 'pointer-events-none': !state.comment }]"
          @click="onPublishComment">发送</view>
      </view>

    </z-paging-list>
  </view>
</template>
<script setup>
import { showModal, showToast, previewImage } from '@/common/util/uni'
import { refreshPrePage, toHomePage } from '@/common/util/util'
import { formatIdentity, formatVipIcon } from '@/common/util/util'
import { societyIdentity, vipLevels } from '@/common/constant/society.js'
import { getDynamicDetail, postDynamicGiveLike, postDynamicCancelLike, postDynamicDel, postDynamicCommentAdd, getDynamicCommentList, postDynamicCommentGiveLike, postDynamicCommentCancelLike } from '@/common/http/module/society.js'

const list = ref();
const state = reactive({
  dynamic_id: '', // 动态id
  detailData: null, // 动态详情数据
  placeholder: '来都来了，说两句吧',
  comment_id: '', // 评论id
  list: [], // 评论列表
  commentNum: 0, //评论数量
  mediaType: 1, // 1.图片 2.视频
  comment: '', // 评论内容
  bottom: 0
})

// 发布者身份&会员标签
const vipIcon = computed(() => vipLevels.find(v => v.value == state.detailData?.user?.vip_level)?.icon)
const identity = computed(() => societyIdentity.find(v => v.value == state.detailData?.member_position)?.label)

// 动态点赞
function onLikeSwitch(dynamic_id, is_like) {
  const postMethods = is_like ? postDynamicCancelLike : postDynamicGiveLike
  postMethods({ dynamic_id }).then(() => {
    showToast(`${is_like ? '取消点赞' : '点赞'}成功`)
    loadDetail()
    refreshPrePage('refresh')
  })
}

function onFocus(e) {
  console.log(e.detail.height, "kkkk")
  state.bottom = Number(e.detail.height)
}
function onBlur() {
  state.bottom = 0
}

// 评论点赞
function onCommentLike(comment_id, is_like) {
  const postMethods = is_like ? postDynamicCommentCancelLike : postDynamicCommentGiveLike
  postMethods({ comment_id }).then(() => {
    showToast(`${is_like ? '取消点赞' : '点赞'}成功`)
    // 刷新评论列表
    refreshCurrentPage()
    refreshPrePage('refresh')
  })
}

// 发表评论
function onPublishComment() {
  if (!state.comment) {
    showToast('请输入内容', 'error')
    return
  }
  postDynamicCommentAdd({
    dynamic_id: state.dynamic_id,
    content: state.comment,
    comment_id: state.comment_id ?? '' // 回复的评论id(评论时不传，回复时必传)
  }).then(() => {
    showToast('评论成功')
    state.comment = ''
    state.placeholder = '来都来了，说两句吧'
    state.comment_id = ''
    refreshCurrentPage()
    // 刷新详情评论数
    loadDetail()
  })
}

// 回复
function onReply(comment_id) {
  state.placeholder = '回复'
  state.comment_id = comment_id
}

// 删除动态
function onDelete(id) {
  showModal({
    confirmText: '删除',
    content: '是否删除该动态',
    success: function (res) {
      if (res.confirm) {
        // 删除接口
        postDynamicDel({ dynamic_id: id }).then(() => {
          showToast('删除成功')
          refreshPrePage('refresh')
          setTimeout(() => uni.navigateBack(), 600)
        })
      }
    }
  });
}

// 获取动态详情
function loadDetail() {
  getDynamicDetail(state.dynamic_id).then(res => {
    console.log('动态详情', res.data);
    state.detailData = res.data
  })
}

function refresh() {
  list.value.onRefresh()
}

// 刷新当前页
function refreshCurrentPage() {
  list.value.onRefreshCurrentPage()
}

// 获取评论
function loadData(page) {
  getDynamicCommentList(page, state.dynamic_id).then(res => {
    state.commentNum = res.data?.total
    list.value.onLoadResult(page ? res.data?.data : []);
  })
}

onLoad((options) => {
  state.dynamic_id = options.id
  loadDetail()
  loadData;
});
</script>

<style lang="scss" scoped>
:deep(.input-placeholder) {
  color: #999
}

:deep(input) {
  color: #333
}

:deep(.u-content__showmore-wrap) {
  justify-content: flex-start !important;
}

:deep(.u-content__showmore-wrap__readmore-btn__icon) {
  display: none !important;
}

.tag-identity {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rpx 6rpx;
  border-radius: 4rpx;
  background-color: #F4AF22;
  color: #FFFFFF;
  font-size: 20rpx;
}

.btn-top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rpx 20rpx;
  border-radius: 12rpx;
  background: linear-gradient(-180deg, rgba(248, 220, 97, 1) 0%, rgba(244, 174, 32, 1) 100%);
  color: #FFFFFF;
  font-size: 28rpx;
}

.comment-item {
  margin-top: 20rpx;
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #EEE;
}

.comment-item:last-child {
  border: none;
}

.comment-item-hd {
  display: flex;
  align-items: center;
  height: 44rpx;
}

.input-style {
  display: flex;
  align-items: center;
  padding-left: 32rpx;
  padding-right: 10rpx;
  background-color: #f5f5f5;
  color: #b5b5b5;
  border-radius: 12rpx;
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  border: 2rpx solid #DCDCDC
}

.btn-send {
  margin-left: 16rpx;
  padding: 16rpx 40rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}
</style>

